<template>
    <div class="goods-add-container">
        <el-steps
            :active="step"
            simple
            finish-status="success"
            process-status="finish"
        >
            <el-step title="填写商品基本信息" icon="el-icon-edit"></el-step>
            <el-step title="添加商品" icon="el-icon-sell"></el-step>
            <el-step title="完成" icon="el-icon-success"></el-step>
        </el-steps>
        <GoodsForm @submit="handle_edit" btn_text="添加" />
    </div>
</template>

<script>
import GoodsForm from "@/components/GoodsForm"
import { add_product } from "@/api"

export default {
    components: {
        GoodsForm
    },
    data() {
        return {
            step: 0
        }
    },
    methods: {
        handle_edit(data) {
            this.step++
            add_product(data).then(() => {
                this.step++
                this.$message({
                    message: "添加成功",
                    type: "success"
                })
            })
        }
    }
}
</script>

<style lang="less">
.goods-add-container {
    .goods-form-container {
        margin-top: 20px;
    }
}
</style>
